<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/boot.js"></script>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
    <table style="width:100%;">
        <tr>
            <td style="width:100%;">
            	时间：<input id="start_time" emptyText="请选择..." class="mini-monthpicker" format="yyyy" showClose="true" oncloseclick="clearT" allowInput="false" style="width:150px;"/>
				<a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>
			</td>
            <td style="white-space:nowrap;">
        		<input type="button" name="line" value="line" class="changeView"/>&nbsp;<input type="button" name="column" value="column" class="changeView"/>
        	</td>
        </tr>
    </table>
</div>

<div class="mini-fit" >
<div id="container" style="min-width: 310px; height: 100%;width: 100%;"></div>
</div>

<script type="text/javascript">
var data = [];
var day = new Date();
var year = 0;
year = day.getFullYear();
var options = {
	title: {
        text: '会员消费习惯年度统计图'
    },
    xAxis: {
        categories: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    },
    yAxis: {
        min: 0,
        allowDecimals: false,
        title: {
            text: '购买人数'
        },
	    plotLines: [{
           	value: 0,
           	width: 1,
           	color: '#808080'
       	}]
    },
    series:[{
    	name: '每月购买人数'
    }],
    credits:{
    	text:"",
        href:"javascript:void(0);"
    }
};
$(document).ready(function(){
	var chart = $('#container').highcharts(options);
	$.post("buy_frequency_year_view.do", null, function(info){
		data = $.parseJSON('['+info+']');
		chart = new Highcharts.Chart(options);
		options.chart.type = 'line';
		chart.series[0].setData(data);
	}, "json");
	$(".changeView").click(function(){
		var type = $(this).val();
		options.chart.type = type;
		chart = new Highcharts.Chart(options);
		chart.series[0].setData(data);
	});
});
function search() {
	var chart = $('#container').highcharts(options);
	$.post("buy_frequency_year_view.do", {startTime: startTime.getFormValue(), endTime: endTime.getFormValue()}, function(info){
		data = $.parseJSON('['+info+']');
		chart = new Highcharts.Chart(options);
		options.chart.type = 'line';
		chart.series[0].setData(data);
	}, "json");
}
</script>
</body>
</html>